<!-- 登录 -->
<template>
  <div class="ofh" v-loading="loading" :element-loading-text="$t('lan.logging')">

    <div class="login">
      <div style="text-align:right;padding:30px; 20px">
        <languageSwitch></languageSwitch>
      </div>
    </div>
    <div class="center">
      <div style="padding:40px 30px;">
        <p class="text-white">
          <img src="@/assets/images/webLogo.png" alt />
          <span style="position: relative;right: 15px;">YSLOCKER</span>
        </p>
        <div class="clear">
          <input :placeholder="$t('lan.accountNumber')" v-model="data.mobile" class="inputText" ref="mobile" />
          <input :placeholder="$t('lan.pleasePassword')" type="password" v-model="data.password" class="inputText" onpaste="return false;" ref="password" />
          <div class="checkbox">
            <el-checkbox v-model="checked">{{$t('lan.account')}}</el-checkbox>
          </div>
          <el-button type="primary" class="width100" @click="userLogin">{{$t('lan.login')}}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import bcrypt from 'bcryptjs';
import languageSwitch from 'component/languageSwitch'
export default {
  components: { languageSwitch },
  data () {
    return {
      checked: JSON.parse(localStorage.getItem("checked")) || false,
      loading: false,
      data: {
        mobile: "",
        password: ""
      }
    };
  },
  watch: {
    // 监视单选框
    checked () {
      if (!this.checked) {
        localStorage.removeItem("mobile");
      }
      // 勾选状态将勾选状态以字json格式存储
      localStorage.setItem("checked", JSON.stringify(this.checked));
    }
  },
  methods: {
    //登录
    async userLogin () {
      if (this.data.mobile == "") {
        this.$message({ type: "error", message: this.$t('lan.accountEmpty') });
        this.$refs.mobile.focus(); // 定位到
        return;
      }
      if (this.data.password == "") {
        this.$message({ type: "error", message: this.$t('lan.passwordEmpty') });
        this.$refs.password.focus();
        return;
      }
      this.loading = true;
      let url = "/auth/adminLogin"; //请求接口名
      let result = await this.request.httpRequest("POST", url, this.data);
      if (result.code == 200) {
        sessionStorage.setItem("userInfo", JSON.stringify(result.data));
        sessionStorage.setItem("token", result.data.token);
        sessionStorage.setItem("loginTime", this.moment().format("YYYY年MM月DD日"));
        sessionStorage.setItem("ip", returnCitySN.cip);
        if (this.checked) {
          localStorage.setItem("mobile", this.data.mobile);
        }
        this.$router.replace("/articleList");
        this.loading = false;
      } else {
        this.loading = false;
        this.$message({ type: "error", message: result.msg });
      }
    },
  },
  mounted () {
    if (this.checked) {
      this.data.mobile = localStorage.getItem("mobile");
    }
  },
  created () {
    document.onkeydown = e => {
      if (e.keyCode == 13) {
        this.userLogin();
      }
    };
  }
};
</script>
<style scoped>
.login {
  width: 100%;
  height: 100vh;
  background: url(../../assets/images/bj.jpg) no-repeat center fixed;
  background-size: cover !important;
  visibility: visible;
  position: relative;
}
.center {
  position: absolute;
  height: 351px;
  width: 370px;
  top: 30%;
  left: 68%;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 3px 2px #bbb;
}
.text-white img {
  height: 50px;
  position: relative;
  top: 14px;
  border-radius: 3px;
}
.checkbox {
  margin-top: -10px;
  float: left;
  margin-left: 5px;
  margin-bottom: 10px;
}
</style>